<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/css/mobile/demos.css"/>
    <link rel="stylesheet" href="/css/wechat/register.css">
</head>
<body ontouchstart>
<header class="demos-header">
    <h1 class="demos-title">注册</h1>
</header>
<div class="bd">
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <img th:src="@{/img/wechat/phone.png}" alt="">
            </div>
            <div class="weui-cell__bd">
                <input id="mobile" class="weui-input" type="tel" placeholder="请输入手机号">
            </div>
        </div>
    </div>
    <div class="weui-cells">
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd">
                <img th:src="@{/img/wechat/safe.png}" class="input-before" alt="">
            </div>
            <div class="weui-cell__bd">
                <input id="kaptcha" class="weui-input" type="text" maxlength="8" placeholder="请填写图形验证码">
            </div>
            <div class="weui-cell__ft">
                <img alt="验证码" onclick="this.src='/mobile/kaptcha/generatorKaptcha?d='+new Date()*1"
                     src="/mobile/kaptcha/generatorKaptcha"/>
            </div>
        </div>
    </div>
    <div class="weui-cells">
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd">
                <img th:src="@{/img/wechat/code.png}" class="input-before" alt="">
            </div>
            <div class="weui-cell__bd">
                <input id="code" class="weui-input" type="number" maxlength="8" placeholder="请输入验证码">
            </div>
            <div class="weui-cell__ft">
                <button class="weui-vcode-btn getCode">获取验证码</button>
            </div>
        </div>
    </div>
    <div class="weui-cells">
        <label for="weuiAgree" class="weui-agree">
            <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox" checked="true">
            <span class="weui-agree__text">
        阅读并同意<a href="/mobile/static/agreement">《用户协议》</a>
      </span>
        </label>
    </div>

    <div class="weui-btn-area">
        <button id="register" class="form-btn weui-btn weui-btn_primary">注册</button>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<script>
    var timing = 60;
    $(".getCode").on('click', function () {
        if ($(this).hasClass('disabled')) {
            return
        }
        sendRegMsgCode();
    });
    var time;

    function timeFun() {
        var getCode = $(".getCode");
        getCode.html(timing + 's后重试').addClass('disabled');
        clearInterval(time);
        time = setInterval(function () {
            timing--;
            getCode.html(timing + 's后重试').addClass('disabled');
            if (timing < 1) {
                clearInterval(time);
                getCode.html('获取验证码').removeClass('disabled');
                timing = 60
            }
        }, 1000)
    }

    //发送短信验证码
    function sendRegMsgCode() {
        $.ajax({
            type: 'POST',
            data: {
                "mobile": $('#mobile').val(),  //手机号
                "code": $('#kaptcha').val()  //图形验证码
            },
            success: function (json) {
                console.log(json);
                if (json.code == 0) {
                    $.toast("发送成功");
                    timeFun();
                } else {
                    $.toast(json.msg, 'cancel')
                }
            },
            url: "/mobile/sendRegMsgCode"
        });
    }

    $('#register').on('click', function () {
        bindMobile();
    });

    //绑定手机号
    function bindMobile() {
        $.ajax({
            type: 'POST',
            data: {
                "mobile": $('#mobile').val(),
                "msgCode": $('#code').val()
            },
            url: "/mobile/bindMobile",
            success: function (json) {
                if (json.code == 0) {
                    $.toast("注册成功");
                    window.location.href = "/mobile/index";
                } else {
                    $.toast(json.msg, 'cancel')
                }
            }
        });
    }

</script>
</body>
</html>